<template>
    <div>
        <el-form
                ref="dataForm"
                status-icon
                :model="form"
                :rules="rules"
                label-width="0px"
        >
            <template>
                <div>
                    <h5>基本信息</h5>
                    <el-divider></el-divider>
                </div>
            </template>
            <el-descriptions :column="4" border>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 姓名</template>
                    <div>{{ user.name }}</div>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">身份证号码</template>
                    <div>{{ user.sfz }}</div>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">系统唯一识别码</template>
                    <div>{{ user.id_num }}</div>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">联系电话</template>
                    <div>{{ user.phone }}</div>
                </el-descriptions-item>
                <el-descriptions-item
                        labelStyle="width: 10%"
                        contentStyle="width: 90%"
                        span="2"
                >
                    <template slot="label">联系地址</template>
                    <div>
                        {{ user.province_name }} {{ user.city_name }}
                        {{ user.district_name }} {{ user.town_name }}
                        {{ user.village_name }} {{ user.address }}
                    </div>
                </el-descriptions-item>
                <el-descriptions-item span="2" labelStyle="width: 10%" contentStyle="width: 90%">
                    <template slot="label"> 建议随访日期</template>
                    <div>{{user.follow_date}}</div>
                </el-descriptions-item>
            </el-descriptions>

            <template>
                <div>
                    <h5>随访情况</h5>
                    <el-divider></el-divider>
                </div>
            </template>

            <el-descriptions :column="4" border class="margin-top">

                <el-descriptions-item span="4" labelStyle="width: 10%" contentStyle="width: 90%">
                    <template slot="label"><span class="red">*</span> 最后接触状态</template>
                    <el-form-item prop="last_contact_state" label="">
                        <el-radio-group v-model="form.last_contact_state">
                            <el-radio label="存活">存活</el-radio>
                            <el-radio label="死亡">死亡</el-radio>
                            <el-radio label="失访">失访</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item span="4" labelStyle="width: 10%" contentStyle="width: 20%"
                                      v-if="form.last_contact_state=='存活'">
                    <template slot="label"><span class="red">*</span> 是否治疗</template>
                    <el-form-item prop="treatment_zl">
                        <el-radio-group v-model="form.treatment_zl">
                            <el-radio label="治疗">治疗</el-radio>
                            <el-radio label="未治疗">未治疗</el-radio>
                            <el-radio label="不明">不明</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%"
                                      v-if="form.last_contact_state=='死亡'">
                    <template slot="label"><span class="red">*</span> 死亡时间</template>
                    <el-form-item prop="last_contact_date">
                        <el-date-picker
                                format="yyyy-MM-dd"
                                placeholder="选择日期"
                                style="width: 100%"
                                type="date"
                                v-model="form.last_contact_date"
                                value-format="yyyy-MM-dd"

                        ></el-date-picker>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%"
                                      v-if="form.last_contact_state=='死亡'">
                    <template slot="label"><span class="red">*</span> 根本死因</template>
                    <el-form-item prop="primary_cause_of_death" label="">
                        <el-input v-model="form.primary_cause_of_death"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%"
                                      v-if="form.last_contact_state=='死亡'">
                    <template slot="label">ICD-10</template>
                    <el-form-item prop="icd" label="">
                        <el-input v-model="form.icd"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%"
                                      v-if="form.last_contact_state=='死亡'">
                </el-descriptions-item>

                <el-descriptions-item span="4" labelStyle="width: 10%" contentStyle="width: 90%"
                                      v-if="form.last_contact_state=='失访'">
                    <template slot="label"><span class="red">*</span> 失访原因</template>
                    <el-form-item prop="lost_visit" label="">
                        <el-radio-group v-model="form.lost_visit">
                            <el-radio label="外迁">外迁</el-radio>
                            <el-radio label="拒绝配合">拒绝配合</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"><span class="red">*</span> 是否通知随访</template>
                    <el-form-item prop="diagnosis_period" label="">
                        <el-radio-group v-model="form.diagnosis_period">
                            <el-radio label="是">是</el-radio>
                            <el-radio label="否">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"><span class="red">*</span> 随访时间</template>
                    <el-form-item prop="follow_up_time" label="">
                        <el-date-picker
                                format="yyyy-MM-dd"
                                placeholder="请选择随访时间"
                                style="width: 100%"
                                type="date"
                                v-model="form.follow_up_time"
                                value-format="yyyy-MM-dd"
                        ></el-date-picker>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"><span class="red">*</span> 随访医生</template>
                    <el-form-item prop="follow_up_doctor">
                        <el-select clearable placeholder="请选择随访医生" style="width: 100%" v-model="form.follow_up_doctor">
                            <el-option
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name"
                                    v-for="item in memberList"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                </el-descriptions-item>
            </el-descriptions>

            <el-descriptions :column="1" border v-if="dialogStatus !== 'formal'">
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 90%">
                    <el-form-item label=" ">
                        <el-button @click="handleDialogVisible(false)" size="small"
                        >取 消
                        </el-button
                        >
                        <el-button
                                type="primary"
                                @click="!form.id ? create() : update()"
                                size="small"
                        >确 定
                        </el-button>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
        </el-form>
    </div>
</template>

<script>
    import {
        createFollowUp,
        updateFollowUp,
        readFollowUp,
    } from "@/api/followUp/followUp";
    import {listMember} from "@/api/member/member";

    export default {
        props: ["rowData", "dialogStatus"],
        components: {},
        data() {
            return {
                user: {},
                form: {
                    id: "",
                    user_id: "",
                    last_contact_state: "存活",
                    last_contact_date: "",
                    primary_cause_of_death: "",
                    treatment_zl: "",
                    icd: "",
                    lost_visit: "",
                    diagnosis_period: "",
                    follow_up_time: "",
                    follow_up_doctor: "",
                    follow_up_status: 0
                },
                rules: {
                    last_contact_state: [{required: true, trigger: "blur", message: "请选择最后接触状态"}],
                    last_contact_date: [{required: true, trigger: "blur", message: "请输入死亡时间"}],
                    primary_cause_of_death: [{required: true, trigger: "blur", message: "请输入根本死因"}],
                    treatment_zl: [{required: true, trigger: "blur", message: "请选择是否治疗"}],
                    lost_visit: [{required: true, trigger: "blur", message: "请选择失访原因"}],
                    diagnosis_period: [{required: true, trigger: "blur", message: "请输入是否通知随访"}],
                    follow_up_time: [{required: true, trigger: "blur", message: "请选择随访时间"}],
                    follow_up_doctor: [{required: true, trigger: "blur", message: "请选择随访医生"}],
                },
                createLoading: false,
                updateLoading: false,
                memberList: [],
            };
        },
        created() {
            this.getListMember();
            if (this.dialogStatus == "update" || this.dialogStatus == "formal") {
                this.user = {...this.rowData};
                this.read();
            }
        },
        methods: {
            treatmentChange(value) {
                if (value == 1) {
                    this.rules.treatment_method[0].required = true;
                    this.rules.treatment_unit[0].required = true;
                    this.rules.treatment_unit_doctor[0].required = true;
                    this.rules.treatment_date[0].required = true;
                    this.rules.modus_operandi[0].required = true;
                    this.rules.operation_mode[0].required = true;
                    this.rules.preoperative[0].required = true;
                    // this.rules.preoperative_other[0].required = true;
                    this.rules.postoperation[0].required = true;
                    // this.rules.postoperation_other[0].required = true;
                    this.rules.later_period[0].required = true;
                    // this.rules.later_period_other[0].required = true;
                    // this.rules.lymph[0].required = true;
                    this.rules.treatment_uncompleted_reason[0].required = false;
                    this.rules.treatment_uncompleted_reason_other[0].required = false;
                } else {

                    this.rules.treatment_method[0].required = false;
                    this.rules.treatment_unit[0].required = false;
                    this.rules.treatment_unit_doctor[0].required = false;
                    this.rules.treatment_date[0].required = false;
                    this.rules.modus_operandi[0].required = false;
                    this.rules.operation_mode[0].required = false;
                    this.rules.preoperative[0].required = false;
                    // this.rules.preoperative_other[0].required = false;
                    this.rules.postoperation[0].required = false;
                    // this.rules.postoperation_other[0].required = false;
                    this.rules.later_period[0].required = false;
                    // this.rules.later_period_other[0].required = false;
                    // this.rules.lymph[0].required = false;
                    this.rules.treatment_uncompleted_reason[0].required = true;
                    this.rules.treatment_uncompleted_reason_other[0].required = true;
                }
            },
            getListMember() {
                let params = {
                    user_name: "",
                    status: "",
                    institution_id: this.$store.state.member.institution_id,
                    pageSize: 1000,
                    page: 1,
                };
                listMember(params).then((res) => {
                    if (res.code === 200) {
                        this.memberList = res.data.data;
                    } else {
                        this.msgError(res.msg);
                    }
                });
            },
            //父页面的回调事件
            handleDialogVisible(isUpdate) {
                this.dialogVisible = false;
                this.$emit("childByDialogVisible", this.dialogVisible, isUpdate);
            },
            //获取数据
            read() {
                readFollowUp({id: this.user.id}).then((response) => {
                    if (response.code == 200) {
                        if (response.data != null) {
                            this.form = response.data;
                        } else {
                            this.form.user_id = this.user.id;
                        }
                    }
                });
            },
            //创建
            create() {
                this.$refs["dataForm"].validate((valid) => {
                    if (valid) {
                        this.createLoading = true;
                        createFollowUp(this.form).then((response) => {
                            this.createLoading = false;
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true);
                            }
                        });
                    }
                });
            },
            //修改
            update() {
                this.$refs["dataForm"].validate((valid) => {
                    if (valid) {
                        this.updateLoading = true;
                        updateFollowUp(this.form).then((response) => {
                            this.updateLoading = false;
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true);
                            }
                        });
                    }
                });
            },
        },
        watch: {},
    };
</script>
<style lang="scss" scoped="scoped">
    .el-form-item {
        margin: 0px;
    }

    .red {
        color: red;
    }

    .el-form-item {
        margin: 0;
    }

    .el-ul {
        list-style: none;
        padding: 0;
    }

    .el-list-li {
        float: left;
        position: relative;
        padding: 10px 10px 0px 0px;
    }

    .el-icon-circle-close {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 2;
        font-size: 20px;
    }
</style>
